<template>
	<view :style="dynamicStyles">
		<u-parse :html="showData.content" ></u-parse>
	</view>
</template>

<script setup lang="ts">

const props = defineProps({
	showData: {
		type: Object,
		default: () => { },
	},
});
const dynamicStyles = computed(() => {
	const commonStyle = props.showData.commonStyle;
	return {
		marginTop: `${commonStyle.styleTopMargin}px`,
		marginLeft: `${commonStyle.styleLeftMargin}px`,
		marginRight: `${commonStyle.styleRightMargin}px`,
		marginBottom: `${commonStyle.styleBottomMargin}px`,
		paddingTop: `${commonStyle.styleTopPadding}px`,
		paddingLeft: `${commonStyle.styleLeftPadding}px`,
		paddingRight: `${commonStyle.styleRightPadding}px`,
		paddingBottom: `${commonStyle.styleBottomPadding}px`,
		borderTopLeftRadius: `${commonStyle.styleLtRadius}px`,
		borderTopRightRadius: `${commonStyle.styleRtRadius}px`,
		borderBottomLeftRadius: `${commonStyle.styleLbRadius}px`,
		borderBottomRightRadius: `${commonStyle.styleRbRadius}px`,
		backgroundColor: props.showData.bgColor,
	};
});
</script>

<style></style>
